// @ts-nocheck
export default {
    data: {
        imgCanvasCTX: '', // 图片canvas
        sliderCanvasCTX: '', // 滑块canvas
        verificationState: '', // 滑块验证状态
        canvasImg: '',
        verificationStateStyle: {
            color: '#9e9e9e',
            backgroundColor: '248,248,248',
            img: 'arrow',
            text: ''
        }, // 滑块验证状态样式属性
        slideWidth: '', // 滑块滑动的宽度
        poinSlideStart: {}, // 滑块开始滑动前滑块位置
        slidePosition: {"x": 210,"y": 115,"r": 10}, // 滑块出生点位置
    },
    props: {
        canvasImgList: {// 验证主图地址列表
            default: [],
            type: Array
        },
        imgWidth: {// 图片宽度
            default: 338,
            type: Number
        },
        imgHeigth: {// 图片高度
            default: 230,
            type: Number
        },
        text: {// 文字
            default: '向右滑动滑块填充图片',
            type: String
        }
    },
    onReady(){
        setTimeout(() => {
            this._setverificationStateColor();
            this._myInit(); // 初始化canvas
        }, 100)
        this.$watch('verificationState', '_setverificationStateColor')
    },
// 初始化canvas
    _myInit() {
        this.imgCanvasCTX = this.$element('imgCanvas').getContext('2d');
        this.sliderCanvasCTX = this.$element('sliderCanvas').getContext('2d');
        this._randomDataInit(); // 随机数据初始化
        this._loadImg(); // 加载图片和滑块
        this._drawBlock(this.imgCanvasCTX,  this.slidePosition,'fill');
        this._drawBlock(this.sliderCanvasCTX, this.slidePosition ,'clip');
    },
// 加载图片和滑块
    _loadImg() {
        const img = new Image();
        img.src = this.canvasImg;
        console.log('加载图片' + this.canvasImg)
        img.width = this.imgWidth;
        img.height = this.imgHeigth;
        img.onload = () => {
            this.imgCanvasCTX.drawImage(img, 0, 0);
            this.sliderCanvasCTX.drawImage(img, 0, 0);
            console.log('加载图片成功')
        }
        img.onerror = () => {
            console.log('加载图片失败');
        }
    },
//    绘制滑块图片
    _drawBlock(ctx, xy, type) {
        console.log('开始画图' + type);
        ctx.restore();// 还原画布
        ctx.clearRect(0, 0, this.imgWidth, this.imgHeigth);
        ctx.save(); // 保存画布
        let x = xy.x,// x轴位置
            y = xy.y,// 轴位置
            r = xy.r,// 半径
            w = 40; // 绘制图形的宽度
        let PI = Math.PI;
        ctx.beginPath();
//      移动到这个点
        ctx.moveTo(x, y);
        ctx.arc(x + (w + 5) / 2, y, r, -PI, 0, true);// top弧
        ctx.lineTo(x + w + 5, y);
        ctx.arc(x + w + 5, y + w / 2, r, 1.5 * PI, 0.5 * PI, false);// right弧
        ctx.lineTo(x + w + 5, y + w);
        ctx.arc(x + (w + 5) / 2, y + w, r, 0, PI, false);// bottom弧
        ctx.lineTo(x, y + w);
        ctx.arc(x, y + w / 2, r, 0.5 * PI, 1.5 * PI, true);// left弧
        ctx.lineTo(x, y);
        ctx.closePath();
        ctx.lineWidth = 2; // 画笔宽度
        ctx.fillStyle = "rgba(255, 255, 255, 0.5)";// 线颜色
        ctx.strokeStyle = "rgba(255, 255, 255, 0.5)"; // 填充的颜色
        ctx.stroke();
        ctx[type](); // 剪切或填充
        ctx.globalCompositeOperation = "xor";// 使用异或操作对源图像与目标图像进行组合。
    },
//    鼠标移到滑块位置
    sliderTouchStart(event) {
        console.log("鼠标开始时，坐标" + JSON.stringify(event.touches));
        this.poinSlideStart = event.touches[0];
    },
//    开始移动滑块
    sliderTouchMove(event) {
        if (this.verificationState === 'success') return false;
        console.log("鼠标移动时，坐标" + JSON.stringify(event.touches));
        const currentPoin = event.touches[0];
        let slideWidth = currentPoin.globalX - this.poinSlideStart.globalX;
        slideWidth = slideWidth < 0 ? 0 : (slideWidth > this.imgWidth - 50 ? this.imgWidth - 50 : slideWidth);
        this.slideWidth = slideWidth;
        this.verificationState = 'move';
        console.log("滑动的距离：" + this.slideWidth)
    },
//    鼠标离开滑块，结束滑动
    sliderTouchEnd(event) {
        if (this.slideWidth > this.slidePosition.x - 8 && this.slideWidth < this.slidePosition.x + 8) {
            this.verificationState = 'success';
            this.$emit('verificationSuccess')
        } else {
            this.verificationState = 'error';
            this.$emit('verificationError')
            setTimeout(() => {
                this.slideWidth = 0;
                this.verificationState = '';
            }, 500)
        }
    },
//    刷新验证码
    loadingClick() {
        this.slideWidth = 0;
        this.verificationState = '';
//        重新载入图片资源
        this._randomDataInit(); // 随机数据初始化
        this._loadImg(); // 加载图片和滑块
        this._drawBlock(this.imgCanvasCTX,  this.slidePosition,'fill');
        this._drawBlock(this.sliderCanvasCTX, this.slidePosition ,'clip');
    },
//    设置不同状态样式
    _setverificationStateColor() {
        let color = this.verificationStateStyle;
        console.log('修改样式')
        switch(this.verificationState) {
            case '':
                color = {
                    color: '#9e9e9e',
                    backgroundColor: '248,248,248',
                    img: 'arrow',
                    text: this.text
                }
                break;
            case 'move':
                color = {
                    color: '#4facfe',
                    backgroundColor: '79,172,254',
                    img: 'arrowMove',
                    text: ''
                }
                break;
            case 'success':
                color = {
                    color: '#2575fc',
                    backgroundColor: '37,117,252',
                    img: 'check',
                    text: ''
                }
                break;
            case 'error':
                color = {
                    color: '#DC143C',
                    backgroundColor: '220,20,60',
                    img: 'noCheck',
                    text: ''
                }
                break;
        }
        this.verificationStateStyle = color;
    },
//    随机数据初始化
    _randomDataInit() {
        this.canvasImg = this.canvasImgList[Math.floor(Math.random() * 4)];
        const x = Math.floor(Math.random() * (this.imgWidth - 150) + 60);
        const y = Math.floor(Math.random() * (this.imgHeigth - 110) + 50);
        this.$set('slidePosition.x', x);
        this.$set('slidePosition.y', y);
    }
}
